<template>
   <div>
    <el-form label-width="120px">
        <el-form-item label="SPU名称" >
            <el-input v-model='spuInfo.spuName'></el-input>
        </el-form-item>
        <el-form-item label="品牌">
            <el-select  placeholder="请选择品牌" v-model='spuInfo.tmId'>
                <el-option :label="item.tmName" :value="item.id" v-for='item in trademarkList' :key='item.id'></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="SPU描述" >
            <el-input type="textarea" rows="4" v-model='spuInfo.description'></el-input>
        </el-form-item>
        <el-form-item label="SPU图片" >
            <el-upload
                action="/dev-api/admin/product/fileUpload"
                list-type="picture-card"
                :file-list="imageList"
                multiple
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success='handleSuccess'>
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
         <el-form-item label="销售属性">
            <el-select  :placeholder="selectText" v-model="attrIdName">
                <el-option :label="item.name" :value="item.id+':'+item.name" v-for='item in unUseSaleList' :key='item.id'></el-option>   
            </el-select>
            <el-button type="primary" icon='el-icon-plus' :disabled='!attrIdName' @click='addSpuSaleAttr'>添加销售属性</el-button>
        </el-form-item>
         <el-form-item >
            <el-table
                :data='spuInfo.spuSaleAttrList'
                style="margin:10px"
                border
                >
                <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop='saleAttrName'
                    label="属性名"
                    >
                </el-table-column>
                <el-table-column
                    label="属性值名称列表">
                    <template v-slot='{row,$index}'>
                        <el-tag v-for='(item,index) in row.spuSaleAttrValueList' 
                        closable
                        @close='row.spuSaleAttrValueList.splice(index,1)'
                        style="margin:5px"
                        :key='item.id'>{{item.saleAttrValueName}}
                        </el-tag>
                        <el-input v-if='row.edit'  v-model="row.attrValueName" @blur="showButton(row,$index)" @keydown.enter.native.prevent='showButton(row,$index)' style="width:80px" size='mini' :ref='$index'></el-input>
                        <el-button v-else size='mini' icon='el-icon-plus' @click='showInput(row,$index)'>添加</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center">
                    <template v-slot='{$index}'>
                        <Hintbutton title="删除" type='danger' icon='el-icon-delete' @click.prevent='spuInfo.spuSaleAttrList.splice($index,1)'></Hintbutton>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="info" @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
    </div>
 
</template>

<script>
export default {
  components: {},
  data() {
    return {
        dialogImageUrl: '',
        dialogVisible: false,
        imageList:[],
        trademarkList:[],
        saleList:[],
        spuInfo:{
            spuName: '',
            description: '',
            category3Id: null,
            tmId: null,
            spuSaleAttrList: [],
            spuImageList: []
        },
        attrIdName:null
    };
  },
  computed: {
      unUseSaleList(){
          const {saleList,spuInfo:{spuSaleAttrList}}=this
          return saleList.filter(item=> !spuSaleAttrList.some(sitem=>sitem.saleAttrName===item.name))
      },
      selectText(){
          const length=this.unUseSaleList.length
          return length>0?`还有${length}个未选择`:'没有啦'
      }
  },
  
  methods: {
      cancel(){
          this.$emit('cancel')
          this.clearData()
      },
      clearData(){
        this.dialogImageUrl= ''
        this.dialogVisible= false
        this.imageList=[]
        this.trademarkList=[]
        this.saleList=[]
        this.spuInfo={
            spuName: '',
            description: '',
            category3Id: null,
            tmId: null,
            spuSaleAttrList: [],
            spuImageList: []
        }
        this.attrIdName=null
      },
      async save(){
        const{spuInfo:{spuSaleAttrList},spuInfo,imageList}=this
        spuInfo.spuSaleAttrList=spuSaleAttrList.filter(item=>{
            delete item.edit
            delete item.attrValueName
            return item.spuSaleAttrValueList.length > 0
        })
        spuInfo.spuImageList=imageList.map(item=>({
            imgName:item.name,
            imgUrl:item.response?item.response.data:item.url
        }))
        await this.$api.spu.addUpdate(spuInfo)
        this.$message.success('保存成功!')
        this.$emit('success')
        this.clearData()
        },
      addSpuSaleAttr(){
          const{attrIdName,spuInfo:{spuSaleAttrList}}=this
          const[baseSaleAttrId,saleAttrName]=attrIdName.split(':')
            spuSaleAttrList.push({
                baseSaleAttrId,
                saleAttrName,
                spuSaleAttrValueList:[]
            })
        this.attrIdName=null
      },
      showButton(row,index){
        const {spuSaleAttrValueList,attrValueName,baseSaleAttrId}=row
          if(attrValueName===''){
              row.edit=false
              return
          }
          const isRepeat=spuSaleAttrValueList.some(item=>item.saleAttrValueName===attrValueName)
          if(isRepeat){
            this.$message.warning('不能重复')
            this.$nextTick(()=>this.$refs[index].focus())
            return
          }
        //   console.log(row)
          const attrValue={
              saleAttrValueName:attrValueName,
              baseSaleAttrId
          }
          spuSaleAttrValueList.push(attrValue)
          row.edit=false
          row.attrValueName = ''
      },
      showInput(row,index){
          if(row.hasOwnProperty('edit')){
              row.edit=true
          }else{
              this.$set(row,'edit',true)
          }
          this.$nextTick(()=>this.$refs[index].focus())
      },
      async getImageList(skuId){
        const result=await this.$api.sku.getImageList(skuId)
        const imageList=result.data.map(item=>({
            name:item.imgName,
            url:item.imgUrl
        }))
        this.imageList=imageList
      },
      async getSpuList(spuId){
        const result=await this.$api.spu.getSpuList(spuId)
        // console.log(result);
        this.spuInfo=result.data
      },
      async getSaleList(){
        const result=await this.$api.spu.getSaleList()
        this.saleList=result.data
      },
      async getTrademarkList(){
        const result=await this.$api.trademark.getTrademarkList()
        this.trademarkList=result.data
      },
      initLoadAdd(category3Id){
          this.spuInfo.category3Id=category3Id
          this.getSaleList()
          this.getTrademarkList()
      },
      initLoadUpdate(spuId){
          this.getImageList(spuId)
          this.getSpuList(spuId)
          this.getSaleList()
          this.getTrademarkList()
      },
       handleRemove(file, fileList) {
         this.imageList=fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response, file, fileList){
          this.imageList=fileList
      }
  },
  mounted() {}
};
</script>
<style scoped>
</style>